﻿<div class="diagram-canvas @Class"
     tabindex="-1"
     @ref="elementReference"
     @onmousedown="OnMouseDown"
     @onmousemove="OnMouseMove"
     @onmousemove:preventDefault
     @onmouseup="OnMouseUp"
     @onkeydown="OnKeyDown"
     @onwheel="OnWheel"
     @onwheel:stopPropagation
     @ontouchstart="OnTouchStart"
     @ontouchmove="OnTouchMove"
     @ontouchend="OnTouchEnd"
     @ontouchend:preventDefault>

    @* Links *@
    <svg class="diagram-svg-layer" style="@LayerStyle">
        @foreach (var link in Diagram.Links)
        {
            <LinkRenderer @key="link" Link="link" />
        }

        @foreach (var node in Diagram.Nodes.Where(n => n.Layer == RenderLayer.SVG))
        {
            <NodeRenderer @key="node" Node="node" />
        }
    </svg>

    @* Nodes *@
    <div class="diagram-html-layer" style="@LayerStyle">
        @foreach (var group in Diagram.Groups)
        {
            <GroupRenderer @key="group" Group="group" />
        }

        @foreach (var node in Diagram.Nodes.Where(n => n.Layer == RenderLayer.HTML && n.Group == null))
        {
            <NodeRenderer @key="node" Node="node" />
        }
    </div>

    @Widgets
</div>